<!--
 * @Description: 资源管理---运维资源---应用目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="tenantResource" style="padding: 0 15px;">
        <el-row class="el-query-bar" :gutter="12">
            <el-row>
                <el-col class="label-cell" style="width: 90px;">
                    <span>产品状态：</span>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="statusQuery" size="small" placeholder="请选择" style="width: 100%;">
                        <el-option
                                v-for="item in productStatusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col class="label-cell" style="width: 90px;">
                    <span>单位名称：</span>
                </el-col>
                <el-col :span="3">
                    <el-input
                            size="small"
                            placeholder="请输入名称"
                            v-model="unitNameQuery">
                    </el-input>
                </el-col>

                <el-col class="label-cell" style="width:110px;">
                    <span>单位产品编号：</span>
                </el-col>
                <el-col :span="3">
                    <el-input
                            size="small"
                            placeholder="请输入编码"
                            v-model="unitProductCodeQuery">
                    </el-input>
                </el-col>
            </el-row>

            <el-row style="margin-top: 6px;">
                <el-col :span="24" style="text-align: center">
                    <el-button class="submit" type="primary" @click="querySearch" size="mini" >搜索</el-button>
                    <el-button class="reset" type="info" @click="clearSearch" size="mini" >重置</el-button>
                </el-col>
            </el-row>
        </el-row>

        <!--        表格-->
        <el-row style="padding-top: 2px;">
            <el-table-ctl :selectBox="false" :operationWid="420" :params="queryParams" @operationClick="operationClick"
                          :operations="operations" :maxHeight="maxHeight" ref="tableObj" :cols="cols"></el-table-ctl>
        </el-row>


        <!--分配资源-->
        <app-dialog
                :isShowDialog="isFenPeiResourceWin"
                :title="winTitle"
                width="500"
                @confirm="addResourceConfirm"
                @close="isFenPeiResourceWin=false">
            <dynamicForm :flushFilter="flushFilter" :disabledField="disabledField" ref="dynamicForm"
                         @changeVal="changeVal"
                         :items="formCols"></dynamicForm>
        </app-dialog>

        <!--资源详情-->
        <app-dialog
                :isShowDialog="isFenPeiListWin"
                title="分配详情"
                width="500"
                :isShowConfirmBtn="false"
                @confirm="addResourceConfirm"
                @close="isFenPeiListWin=false">
            <dynamicFormList :disabledField="disabledField" ref="dynamicForm" @changeVal="changeVal"
                             :items="formCols"></dynamicFormList>
        </app-dialog>

    </div>
</template>

<script>
    import AppDialog from "@/components/AppCommon/AppDialog";
    import elTableCtl from "../devOpsResource/components/el-table-ctl";
    import dynamicForm from "@/views/devOpsResource/components/dynamicForm";
    import dynamicFormList from "@/views/devOpsResource/components/dynamicFormList";
    import cols, {formCols, _initColWidth, _changToAddDomain, _getCloneCols} from './data/domainCols.js';
    import {uuid} from "./data/domainCols";

    export default {
        name: "dataDic",
        components: {
            AppDialog,
            elTableCtl,
            dynamicForm,
            dynamicFormList
        },
        computed: {
            productStatusOptions() {
                return [{
                    value: 0,
                    label: '未启用'
                }, {
                    value: 1,
                    label: '在用'
                }, {
                    value: 2,
                    label: '自动停用'
                }, {
                    value: 3,
                    label: '手动停用'
                }];
            },
            queryParams() {
                return {
                    status: this.statusQuery,//记录状态
                    unitName: this.unitNameQuery,//查询单位名称
                    unitProductCode: this.unitProductCodeQuery,//单位产品编号
                };
            }
        },
        data() {
            return {
                flushFilter: "",
                winTitle: "分配资源",
                operations: [
                    {label: "启用", id: 'startRecord',disabled:false,getDisable:function (btnId,rowObj) {
                            //如果是未启用状态 才可以点击启动
                            if((rowObj["productStatus"]+"")==="0"){
                                return false;
                            }else{
                                return true;
                            }
                        }},
                    {label: "停用", id: 'stopRecord',disabled:false,getDisable:function (btnId,rowObj) {
                            //如果是未启用状态 才可以点击启动
                            if((rowObj["productStatus"]+"")==="0"){
                                return true;
                            }else  if((rowObj["productStatus"]+"")==="3"||(rowObj["productStatus"]+"")==="2"){
                                return true;
                            }else{
                                return false;
                            }
                        }},
                    {label: "重启", id: 'restart',disabled:false,getDisable:function (btnId,rowObj) {
                            //如果是未启用状态 才可以点击启动
                            if((rowObj["productStatus"]+"")==="0"){
                                return true;
                            }else  if((rowObj["productStatus"]+"")==="3"||(rowObj["productStatus"]+"")==="2"){
                                return false;
                            }else{
                                return true;
                            }
                        }},
                    {label: "分配资源", id: 'fenPei',disabled:false},
                    {label: "分配详情", id: 'seeFenPei',disabled:false}
                ],
                productId: '',
                unitNameQuery: '',//查询单位名称
                unitProductCodeQuery: '',//查询单位产品编号
                statusQuery: "",//查询状态
                unitOrgCode: '',//单位组织码
                unitId: "",//单位id
                expirePeriod: [],
                unitName: "",//单位名称
                unitProductCode: "",//单位产品编号
                disabledField: [],
                isFenPeiResourceWin: false,
                isFenPeiListWin: false,
                maxHeight: parseFloat(document.body.clientHeight) - 190,
                searchName: '',
                cols: _getCloneCols(cols),
                formCols: formCols
            }
        },
        created() {

        },
        beforeMount() {
        },
        mounted() {
            this.$refs.tableObj.flushGridByUrl("getTenantUserResource");
        },
        watch: {},
        methods: {
            //停用记录
            stopRecord() {
                this.$confirm('确定要停用产品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.api.tenantResourceStop({
                        tenantId: this.unitId + "",
                        productId: this.unitProductCode + ""
                    })
                        .then(res => {
                            this.$refs.tableObj.reloadData();
                        })
                        .catch(err => {
                            console.warn(err.msg);
                        });

                }).catch(() => {

                });
            },
            //启用记录
            startRecord(statusDb = 1) {
                this.api.tenantResourceStart({
                    tenantId: this.unitId + "",
                    productId: this.unitProductCode + ""
                })
                    .then(res => {
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg);
                    });
            },
            //分配资源确定
            addResourceConfirm() {
                let tenantResourceIds = _changToAddDomain(this.formCols);
                let domainObj = {};
                domainObj["tenantUserId"] = this.unitId;
                domainObj["tenantProductCode"] = this.unitProductCode;
                domainObj["productId"] = this.productId;
                domainObj["tenantResourceIds"] = tenantResourceIds;
                if(tenantResourceIds.length===0){
                    this.$alert('请选择需要分配的资源信息', '提示', {
                        confirmButtonText: '取消',
                        callback: action => {
                        }
                    });
                    return void(0);
                }
                domainObj["tenantOrganizeCode"] = this.unitOrgCode;
                //数据校验
                if (this.unitId == null || this.unitId === "") {
                    this.$alert('单位id不能为空', '提示', {
                        confirmButtonText: '取消',
                        callback: action => {
                        }
                    });
                }
                if (this.productId == null || this.productId === "") {
                    this.$alert('产品id不能为空', '提示', {
                        confirmButtonText: '取消',
                        callback: action => {
                        }
                    });
                }
                //确定分配操作
                this.api.confirmAllocate(domainObj)
                    .then(res => {
                        this.isFenPeiResourceWin = false;
                        this.$message({
                            message: '分配成功！',
                            type: 'success'
                        });
                        this.formCols.forEach((itemObj) => {
                            itemObj["value"] = "";
                        });
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //分配资源
            fenPei({row, id}) {
                let backFun=(dataMap)=>{
                    this.formCols.forEach((itemObj) => {
                        itemObj["tenantId"] = row["unitId"];
                        itemObj["tenantProductCode"] = row["unitProductCode"];
                        //刷新下拉数据
                        let remarkStr=dataMap[itemObj.queryType + ""];
                        if(remarkStr!=null&&remarkStr!==""&&remarkStr!=="undefined"){
                            itemObj["value"] ="已分配【"+ dataMap[itemObj.queryType + ""]+"】" ;
                            itemObj["disabled"]=true;
                        }else{
                            itemObj["value"] ="";
                            itemObj["disabled"]=false;
                        }
                    });
                    this.flushFilter = uuid();
                    this.isFenPeiResourceWin = true;
                }
                this.loadListRecord(backFun);

            },
            //操作栏 按钮点击事件
            operationClick({row, id}) {
                this.unitId = row["unitId"];  // 租户id
                this.unitProductCode = row["unitProductCode"];  //产品编号
                this.unitOrgCode = row["unitOrgCode"]; //租户组织码
                this.productId = row["productCode"]; //产品编号
                this[id] && this[id]({row, id});
            },
            //重启服务
            restart(){
                this.api.tenantResourceRestart({
                    tenantId: this.unitId + "",
                    productId: this.unitProductCode + ""
                })
                    .then(res => {
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg);
                    });
            },
            //查看分配详情
            seeFenPei() {
                this.formCols.forEach((itemObj) => {
                    itemObj["value"] = "";
                });
                this.isFenPeiListWin = true;
                this.loadListRecord();
            },
            loadListRecord(backFun) {
                this.api.getAllocateTenantResourceDetail({
                    tenantId: this.unitId + "",
                    tenantProductCode: this.unitProductCode + ""
                })
                    .then(res => {
                        let dataAry = res["data"];
                        if (dataAry != null) {
                            let dataMap = {};
                            dataAry.forEach((itemObj) => {
                                dataMap[itemObj["resourceType"] + ""] = itemObj["resourceName"];
                            });
                            if(backFun!=null){
                                backFun(dataMap);
                            }else{
                                this.formCols.forEach((itemObj) => {
                                    itemObj["value"] = dataMap[itemObj.queryType + ""] || "";
                                })
                            }
                        }

                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //清空查询条件
            clearSearch() {
                this.unitProductCodeQuery = "";
                this.unitNameQuery = "";
                this.statusQuery = "";
                // 需要延时下 不然查询条件还没变化 导致查询不对
                setTimeout(() => {
                    this.$refs.tableObj.reloadData();
                }, 300)
            },
            //进行查询操作
            querySearch() {
                this.$refs.tableObj.reloadData(null,null,true);
            },
            changeVal({id, val}) {

            }
        }
    };
</script>
<style>
    .tenantResource .app-status .app-status__circle {
        width: 12px;
        height: 8px;
    }
    .tenantResource .app-status.app-status__error{
        color:#999 !important;
    }
    .tenantResource .app-status.app-status__error .app-status__circle{
        background-color: #999;
        box-shadow: 0 0 3px 2px #999;
    }
</style>